<template>
	<div class="middle-container">
		<Menu></Menu>
		<div v-for="(item, index) in panelDataList" :key="index">	
			<div @click="print(item)">
				<Panel v-bind:panelData="item" style="margin-top: 20px;"></Panel>
			</div>
		</div>
		<div style="margin-top: 20px; text-align: center; margin-bottom: 50px;">
			<Page :total="total" :current="filter.page" :page-size="filter.per_page" @on-change="change"/>
		</div>
	</div>
</template>

<script>
	import Menu from './Menu'
	import Panel from './Panel'
	import { getArticleList } from '@/api/index'

	export default {
		name: 'BodyContainer',
		components: {
			Menu: Menu,
			Panel: Panel,
		},
		data(){
			return {
				filter: {
					page: 1,
					per_page: 3,
					order_by: 'id',
					order_method: 'asc'
				},
				total: 0,
				panelDataList: [
					{
						id: 1,
						title: "Docker的笔记和整理文档",
						description: "~本人这学期要准备实习面试，所以无法花太多时间去更新，所以更新进度慢还请见谅 感觉自己的基础和算法能力....~",
						created_at : "2021-02-12",
						comments_times: 80,
						read_times: 1443,
						thumb_up_times: 18,
						// img_url: "https://blog.api.xiaoyou66.com/assets/images/background/img142.jpg" 
						cover_url: require("../assets/images/image01.jpg"),
					}
				]
			}
		},
		methods: {
			insurance(id) {
				this.$router.push({
					name: 'Blog',
					params: {
						id: id
					}
				})
			},
			print(item){
				this.$router.push({
					name: 'Blog',
					query: {
						id: item.id
					}
				})
			},
			getList(){
				getArticleList(this.filter).then(res=>{
					this.panelDataList = res.data.data.list
					this.total = res.data.data.total
				})
				window.scrollTo({
					left: 0,
					top: 0,
				})
			},
			change: function (page) {
				this.filter.page = page
				localStorage.setItem("articles_filter", JSON.stringify(this.filter))
				this.getList()
			}
		},
		mounted(){
			if(localStorage.getItem("articles_filter") != undefined){
				this.filter = JSON.parse(localStorage.getItem("articles_filter"))
			}
			this.getList()
		}
	}
</script>

<style scoped>
.middle-container{
	width: 40%;
	border-radius: 10px;
	padding: 0px 20px;
	min-width: 600px;
	max-width: 1000px;
}
</style>
